<template>
  <div class="refine_supervise supervise">

    <div class="contant">
      <div class="tab-title">
        <ul>
          <li class="" @click="proRouter"><img src="../../../assets/pro-icon.png">生产线</li>
          <li class="active" @click="enRouter"><img src="../../../assets/ensure-icon.png">监管线</li>
          <li class="" @click="supRouter"><img src="../../../assets/supervise-icon.png">保障线</li>
        </ul>
        <i class="el-icon-close stat_close" @click="goBack" style="color: #fff;"></i>
        <!--<el-button icon="el-icon-close stat_close"></el-button>-->
      </div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row>
          <el-col :span="24">
            <el-form-item label="管理单位">
              <el-select clearable v-model="formInline.department" @change="sendChange($event, 'first')"
                         placeholder="海事处">
                <el-option v-for="item in dpOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select clearable v-model="formInline.organization" @change="sendChange($event, 'second')"
                         placeholder="执法大队">
                <el-option v-for="item in ogOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select v-model="people" multiple collapse-tags clearable placeholder="执法人员" @change="search">
                <el-option v-for="item in disSecondOptions" :key="item.id" :label="item.fullname" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="任务来源">
              <el-checkbox-group v-model="formInline.type" @change="search">
                <el-checkbox label="PFRW" name="type">派发任务</el-checkbox>
                <el-checkbox label="LSRW" name="type">临时任务</el-checkbox>
                <el-checkbox label="LQRW" name="type">领取任务</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="开始时间">
              <el-date-picker class="select-width-220" @change="search" v-model="formInline.starttime" type="date"
                              placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                              :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
              <el-date-picker class="select-width-220" @change="search" v-model="formInline.endtime" type="date"
                              placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
                              :picker-options="pickerOptions1">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="任务类型">
              <el-select v-model="formInline.tptype1" placeholder="" style="width:150px;" @change="typeChange($event)">
                <el-option v-for="item in taskType1Option" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select v-model="formInline.tptype2" placeholder="" style="width:150px;" @change="typeChange2($event)">
                <el-option v-for="item in taskType2Option" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <el-select v-model="formInline.tptype3" placeholder="" style="width:150px;" @change="search">
                <el-option v-for="item in taskType3Option" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>
      </el-form>
      <div class="sup-row">
        <div class="sup-cont">
          <div class="grid-content bg-purple">
            <h3 class="title">任务统计</h3>
            <div id="taskChart" class="echarts"></div>
          </div>
        </div>
        <div class="sup-cont">
          <div class="grid-content bg-purple">
            <h3 class="title">出动执法人员数量</h3>
            <div id="peopleChart" class="echarts"></div>
          </div>
        </div>
        <div class="sup-cont">
          <div class="grid-content bg-purple">
            <h3 class="title">检查船舶</h3>
            <div id="boatChart" class="echarts"></div>
          </div>
        </div>

        <div class="sup-cont">
          <div class="grid-content bg-purple">
            <h3 class="title">行政处罚</h3>
            <div id="punishChart" class="echarts"></div>
          </div>
        </div>

        <div class="sup-cont">
          <div class="grid-content bg-purple">
            <h3 class="title">现场监督</h3>
            <div id="spotChart" class="echarts"></div>
          </div>
        </div>

        <div class="sup-cont">
          <div class="grid-content bg-purple">
            <h3 class="title">FSC检查</h3>
            <div id="fscChart" class="echarts"></div>
          </div>
        </div>
        <div class="sup-cont">
          <div class="grid-content bg-purple">
            <h3 class="title">PSC检查</h3>
            <div id="pscChart" class="echarts"></div>
          </div>
        </div>



        <div class="sup-cont">
          <div class="grid-content bg-purple">
            <h3 class="title">巡航里程</h3>
            <div id="cruiseChart" class="echarts">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as organizationService from '@/services/OrganizationService'
  import * as sysUserService from '@/services/SysUserService'
  import taskTypeService from '@/services/TaskTypeService'
  import statisticService from '@/services/StatisticService'

  export default {
    name: 'Supervise',
    data: function () {
      return {
        formInline: {
          region: '',
          type: [],
          time: '',
          department: '',
          organization: '',
          tptype1: '',
          tptype2: '',
          tptype3: '',
          endtime: '',
          starttime: '',
        },
        people: [],
        disSecondOptions: [],
        dpOptions: [],
        ogOptions: [],
        myChart1: {},
        myChart2: {},
        myChart3: {},
        myChart4: {},
        myChart5: {},
        myChart6: {},
        myChart7: {},
        myChart8: {},
        sysUser: [],
        taskType1Option: [],
        taskType2Option: [],
        taskType3Option: [],
        pickerOptions1: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
      }
    },
    created () {
      this.getSelect()
    },
    mounted () {
      //任务统计
      this.myChart1 = this.$echarts.init(document.getElementById('taskChart'))
      //检查船舶
      this.myChart2 = this.$echarts.init(document.getElementById('boatChart'))
      //行政处罚
      this.myChart3 = this.$echarts.init(document.getElementById('punishChart'))
      //FSC检查
      this.myChart4 = this.$echarts.init(document.getElementById('fscChart'))
      //PSC调查
      this.myChart5 = this.$echarts.init(document.getElementById('pscChart'))
      //巡航里程
      this.myChart6 = this.$echarts.init(document.getElementById('cruiseChart'))
      //出动执法人员数量
      this.myChart7 = this.$echarts.init(document.getElementById('peopleChart'))
      //现场监督
      this.myChart8 = this.$echarts.init(document.getElementById('spotChart'))
      var option1 = {
        color: ['#41f8dc', '#ffa02f'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: 'white'
          },
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            axisLine: {
              lineStyle: {color: 'white',}

            },
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            axisLine: {
              lineStyle: {color: 'white',}

            },
            minInterval: 1,
            type: 'value'
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '20%',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            data: []
          }
        ]
      }
      this.myChart1.setOption(option1)
      this.myChart2.setOption(option1)
      this.myChart3.setOption(option1)
      this.myChart4.setOption(option1)
      this.myChart5.setOption(option1)
      this.myChart6.setOption(option1)
      this.myChart7.setOption(option1)
      this.myChart8.setOption(option1)
      this.search()
      // this.getXHLC()
      // this.getRegulation()
    },
    methods: {
      handleOptionClick () {
      },
      getSelect () {
        organizationService.findAll().then(async res => {
          await res.data.sort((a, b) => {
            if (a.businessOrg < b.businessOrg) {
              return -1
            }
            if (a.businessOrg > b.businessOrg) {
              return 1
            }
            return 0
          })
          this.dpOptions = res.data
          // this.organizaAll = res.dataAll
        })

        sysUserService.findAll().then(res => {
          this.sysUser = res.data
        })

        taskTypeService.search().then(res => {

          this.taskType1Option = res
        })
      },
      typeChange (event) {
        this.formInline.tptype2 = ''
        this.formInline.tptype3 = ''
        this.taskType2Option = []
        this.taskType3Option = []
        let type = this.taskType1Option.find(item => {
          return item.id == event
        })
        if (type.subset) {
          this.taskType2Option = type.subset
        }
        this.search()
      },
      typeChange2 (event) {
        this.formInline.tptype3 = ''
        this.taskType3Option = []
        let type = this.taskType2Option.find(item => {
          return item.id == event
        })
        if (type.subset) {
          this.taskType3Option = type.subset
        }
        this.search()
      },
      async sendChange (val, kind) {
        if (kind == 'first') {
          this.ogOptions = []
          this.formInline.organization = ''
          let type = this.dpOptions.find(item => {
            return item.id == val
          })
          if (type && type.sub) {
            this.$set(this, 'ogOptions', type.sub)
          }
        }
        this.disSecondOptions = []
        this.formInline.people = ''
        let arr = await this.sysUser.filter(fil => {
          if (fil.organiza) {
            return fil.organiza.id == val
          }
        }).sort((a, b) => {
            if (a.level < b.level) {
                return 1
            } else {
                return -1
            }
            return 0
        })
        if (arr) {
          this.$set(this, 'disSecondOptions', arr)
        }
        this.search()
      },
      goBack () {
        this.$router.push('/map')
      },
      handlerQuery () {
        let str = ''
        // formInline: {
        //   region: '',
        //     type: [],
        //     time: '',
        //     department: '',
        //     organization: '',
        //     tptype1: '',
        //     tptype2: '',
        //     tptype3: '',
        //     endtime: '',
        //     starttime: '',
        //     people: [],
        // },
        if (this.formInline.starttime) {
          str += 'begineTime.greaterOrEqualThan=' + this.$m(this.chooption.startTime).toISOString()
        }
        if (this.formInline.endtime) {
          if (str) {
            str += '&'
          }
          str += 'endTime.lessOrEqualThan=' + this.$m(this.chooption.endTime).toISOString()
        }
        return str
      },
      search () {
        let taskSend = false, taskTemp = false, taskReceive = false, taskUsers = []
        if (this.formInline.type) {
          this.formInline.type.forEach(item => {
            if (item == 'PFRW') {
              taskSend = true
            } else if (item == 'LSRW') {
              taskTemp = true
            } else if (item == 'LQRW') {
              taskReceive = true
            }
          })
        }
        if (this.people) {
          for (let key of this.people) {
            taskUsers.push({userId: key})
          }
        }
        let obj = {
          begineTime: this.$m(this.formInline.starttime).toISOString(),
          endTime: this.$m(this.formInline.endtime).toISOString(),
          managementUnit: this.formInline.department, // 管理单位
          enforcementBrigade: this.formInline.organization, // 执法大队
          taskSend,
          taskTemp,
          taskReceive,
          taskUsers,
          type1: this.formInline.tptype1,
          type2: this.formInline.tptype2,
          type3: this.formInline.tptype3
        }
        statisticService.statistics(obj).then(res => {
          if (res) {
            let option = {
                calculable : true,
              legend: {
                textStyle: {
                  color: 'white'
                },
                data: ['检查总数量']
              },
              xAxis: [
                {
                  type: 'category',
                  axisLabel: {'interval': 0},
                  data: [],
                  splitLine: {show: false}
                }
              ],
              series: [{
                name: '检查总数量',
                barWidth: '20%',
                data: []
              }]
            }
            for (let key in res.data) {
              if(res.data[key]){
                option.xAxis[0].data = res.data[key].map((ma, index) => {
                    // ma.name = ma.name.substring(0, ma.name.length - 3)
                    ma.name = ma.name.substring(0, ma.name.indexOf('海事处') > 0 ? ma.name.indexOf('海事处') : ma.name.length)
                    ma.name = ma.name.substring(0, ma.name.indexOf('海巡执法大队') > 0 ? ma.name.indexOf('海巡执法大队') : ma.name.length)
                    if(index % 2 != 0){
                        ma.name = `\n${ma.name}`
                    }
                    return ma.name
                }) // .substring(0, ma.name.indexOf('海事处'))
                option.series[0].data = res.data[key].map(ma => {return ma.num})
              }
              if (key == 'STATISTICS_TASK_TASK' && res.data[key]) {
                option.legend.data[0] = '任务完成数量'
                option.series[0].name = '任务完成数量'
                // option.series[0].data = [95, 375, 1131, 2134, 1545, 61, 44, 2828]
                this.myChart1.setOption(option)
              } else if (key == 'STATISTICS_TASK_USER' && res.data[key]) {
                option.legend.data[0] = '执法人员总数量'
                option.series[0].name = '执法人员总数量'
                this.myChart7.setOption(option)
              } else if (key == 'STATISTICS_TASK_SHIP' && res.data[key]) {
                option.legend.data[0] = '检查总数量'
                option.series[0].name = '检查总数量'
                this.myChart2.setOption(option)
              } else if (key == 'STATISTICS_TASK_SCENE' && res.data[key]) {
                option.legend.data[0] = '现场监督总数'
                option.series[0].name = '现场监督总数'
                // option.series[0].data = [32, 167, 696, 1492, 1482, 27, 7, 1958]
                this.myChart8.setOption(option)
              } else if (key == 'STATISTICS_TASK_FSC' && res.data[key]) {
                option.legend.data[0] = 'FSC检查总数量'
                option.series[0].name = 'FSC检查总数量'
                // option.series[0].data = [49, 178, 328, 639, 37, 25, 32, 829]
                this.myChart4.setOption(option)
              } else if (key == 'STATISTICS_TASK_PSC' && res.data[key]) {
                option.legend.data[0] = 'PSC检查总数量'
                option.series[0].name = 'PSC检查总数量'
                this.myChart5.setOption(option)
              } else if (key == 'STATISTICS_TASK_PUNISH' && res.data[key]) {
                option.legend.data[0] = '行政处罚总数量'
                option.series[0].name = '行政处罚总数量'
                // option.series[0].data = [11, 30, 34, 24, 24, 9, 2, 41]
                this.myChart3.setOption(option)
              } else if (key == 'STATISTICS_TASK_MILEAGE' && res.data[key]) {
                option.legend.data[0] = '巡航总里数'
                option.series[0].name = '巡航总里数'
                this.myChart6.setOption(option)
              }
            }
          }
        })
      },
      dpChange () {
        this.formInline.organization = ''
        this.formInline.people = []
        this.ogOptions = []
        this.disSecondOptions = []
        for (var x of this.orgcont) {

          if (this.formInline.department == x.d_id) {
            for (var i of x.son) {
              this.ogOptions.push({
                'label': i.name,
                'value': i.d_id
              })
            }
          }
        }
        this.search()
        // this.getData(1, this.department)
      },
      ogChange (val) {
        this.$axios.get(this.$config['disUser'], {
          params: {
            skey: localStorage.getItem('auth'),
            dId: val
          }
        }).then((res) => {
          for (var i of res.data.content) {
            this.disSecondOptions.push({
              label: i.fullname,
              value: i.d_id
            })
          }
        })
        this.search()

      },
      changeType () {
        for (var key of this.taskType1Option) {
          if (key.d_id == this.formInline.tptype1) {
            this.taskType2Option = key.son
          }
        }
        this.search()
      },
      changeType1 () {
        this.search()
      },
      tpChange () {
        this.search()
      },
      startChange () {
        this.search()
      },
      endChange () {
        this.search()
      },
      peopleChange () {
        this.search()
      },
      //路由跳转
      proRouter () {
        this.$router.push('/produce')
      },
      enRouter () {
        this.$router.push('/supervise')
      },
      supRouter () {
        this.$router.push('/ensure')
      }
    }
  }
</script>

<style lang="scss">
  .supervise {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1200;

    .stat_close {
      position: absolute;
      right: 0;
      top: 0;
      line-height: 40px;
      cursor: pointer;
      padding: 0 4px;
    }

    .contant {
      margin: 0px;
      color: white;
      background: url("../../../assets/produce-bg.jpg") no-repeat;
      background-size: 100% 100%;
      background-position: center center;
      height: 100%;
      overflow: auto;

      .el-form-item__label, .el-checkbox__label {
        color: white;
      }

      .sup-row {
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:space-between;
      }

      .sup-cont {
        height: 290px;
        margin-top:10px;
        width: 24%;
      }

      .margin-top-10 {
        height: 49%;
        margin-top: 1%;
      }

      .el-form-item {
        margin-bottom: 10px;
      }

      .tab-title {
        height: 40px;
        margin-bottom: 10px;
        position: relative;

        ul {
          display: block;
          height: 40px;
          line-height: 40px;
        }

        li {
          float: left;
          width: 160px;
          font-size: 16px;
          text-align: center;
          background: url("../../../assets/tab-bg.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 30px;
          cursor: pointer;
          color: #fff;

          img {
            width: 25px;
            position: relative;
            top: 5px;
            margin-right: 10px;
          }
        }

        a {
          display: block;
          color: #fff;
        }

        .active {
          background: url("../../../assets/tab-act.png") no-repeat;
          background-size: 100% 100%
        }
      }
    }

    .grid-content {
      border-radius: 2px;
      margin-bottom: 20px;
      border: 1px solid #198ce1;
      background-color: rgba(4, 5, 70, 0.88);
      height: 100%;
    }

    .title {
      padding-left: 15px;
      background: rgba(16, 15, 55, 0.4);
      height: 34px;
      line-height: 34px;
      box-shadow: 0px 0px 10px #00eaff inset;
      border-bottom: 1px solid #eee;
    }

    .echarts {
      // background: #f5f5f5;
      height: 85%;
    }
  }

  @media only screen and (max-width: 1024px) {
    .select-width-220 {
      width: 150px !important;
    }

  }
</style>
